<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 1000px;height: 300px;margin: 0 auto;position: relative;overflow: hidden;}
        .imgbox{position: absolute;}
        .imgbox img{width: 1000px;height:300px;float: left}

        .btns input{position: absolute;width: 40px;height: 40px;border: none;background: rgba(200,200,200,0.5);top:130px;}
        .btns input:active{background: #55f;color: #fff}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
            <img src="./imgs/banner6.jpg" alt="">
            <img src="./imgs/banner7.jpg" alt="">
            <!-- 无缝轮播图1：复制图片1，放在所有图片最后，用来做无缝切换时的过渡使用 -->
            <img src="./imgs/banner1.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" id="left" value="左">
            <input type="button" id="right" value="右">
        </div>
    </div>
</body>
<script src="./move.js"></script>
<script>
        function Banner(index){
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            this.imgbox = document.querySelector(".imgbox");
            this.imgs = this.imgbox.children;
            // 并设置默认索引
            this.index = index;
            this.imgbox.style.width = this.imgs.length * this.imgs[0].offsetWidth + "px";
            // 根据默认索引，设置图片容器的真实位置
            this.imgbox.style.left = this.index * -this.imgs[0].offsetWidth + "px";

            // 2. 执行绑定点击事件
            this.addEvent();
         }
        Banner.prototype = {
            constructor:Banner,
            addEvent:function(){
                const that = this;
                // 绑定左按钮点击事件
                this.left.onclick = function(){
                    // 4.1. 执行计算索引，--
                    that.changeIndexLeft()
                }
                // 绑定右按钮点击事件
                this.right.onclick = function(){
                    // 4.2. 执行计算索引，++
                    that.changeIndexRight()
                }
            },
            changeIndexLeft:function(){
                // 计算索引：--
                // ...
                // 5.1. 执行改变图片容器位置
                this.changePos();
            },
            changeIndexRight:function(){
                // 计算索引：++
                if(this.index === this.imgs.length-1){

                    this.index = 1;
                    this.imgbox.style.left = 0;
                }else{
                    this.index++;
                }
                // 5.2. 执行改变图片容器位置
                this.changePos();
            },
            changePos:function(){
                move(this.imgbox, {
                    left: -this.index * this.imgs[0].offsetWidth
                })
            }
        }

        new Banner(1);

</script>
</html>